<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="译者：王赛 <wangsai@bootcss.com>">

<title>Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网</title>

<link rel="canonical" href="http://v3.bootcss.com/">

<!-- Bootstrap core CSS -->

  <link href="static/css/bootstrap.min2.css" rel="stylesheet">






<!-- Documentation extras -->

<link href="static/css/docs.min.css" rel="stylesheet">

<!--[if lt IE 9]><script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.31/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="apple-touch-icon" href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.31/apple-touch-icon.png">
<link rel="icon" href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.31/favicon.ico">

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?bdb993b828cbe079a7fbc1a951f44726";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


  </head>
  <body class="bs-docs-home">
    <a id="skippy" class="sr-only sr-only-focusable text-center" href="#content">
  <div class="container">
    <span class="skiplink-text">Skip to main content</span>
  </div>
</a>

    

    <header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="" class="navbar-brand">Bootstrap 中文文档</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="javascript:;">入门</a>
        </li>
        <li>
          <a href="javascript:;">全局 CSS 样式</a>
        </li>
        <li>
          <a href="javascript:;">组件</a>
        </li>
        <li>
          <a href="javascript:;">JavaScript 插件</a>
        </li>
        <li>
          <a href="javascript:;">定制</a>
        </li>
        <li><a class="reddot" href="javascript:;" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-网站实例'])" target="_blank">网站实例</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            v3 <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="javascript:;">v5</a></li>
            <li><a href="index3.html">v4</a></li>
            <li class="divider"></li>
            <li class="active"><a href="">v3</a></li>
            <li><a href="index6.html">v2</a></li>
          </ul>
        </li>
        
        <li><a href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">优站精选</a></li>
        <li><a href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">官方博客</a></li>
        <li><a href="javascript:;">返回 Bootstrap 中文网</a></li>
      </ul>
    </nav>
  </div>
</header>


    <main class="bs-docs-masthead" id="content" tabindex="-1">
  <div class="container">
    <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
    <p class="lead">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
    <p class="lead">
      <a href="javascript:;" class="btn btn-outline-inverse btn-lg" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3首页大图-下载 3.4.1 按钮'])">下载 Bootstrap</a>
    </p>
    <p class="version">当前版本： v3.4.1 | 文档更新于：2022-02-28</p>
    <div id="tuijian"></div>
  </div>
</main>

<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">为所有开发者、所有应用场景而设计</h2>
    <p class="lead">Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>

    <hr class="half-rule">

    <div class="row">
      <div class="col-sm-4">
        <img src="static/picture/sass-less.png" alt="Sass and Less support" class="img-responsive" width="1000" height="360">
        <h3>预处理工具</h3>
        <p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具 <a href="javascript:;">Less</a> 和 <a href="javascript:;">Sass</a> 开发的。你可以直接采用预编译的 CSS 文件快速开发，也可以从 Bootstrap 源码自定义自己需要的样式。</p>
      </div>
      <div class="col-sm-4">
        <img src="static/picture/devices.png" alt="Responsive across devices" class="img-responsive" width="1000" height="360">
        <h3>一个框架、多种设备。</h3>
        <p>你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。</p>
      </div>
      <div class="col-sm-4">
        <img src="static/picture/components.png" alt="Components" class="img-responsive" width="1000" height="360">
        <h3>功能完备</h3>
        <p>Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。</p>
      </div>
    </div>

    <hr class="half-rule">

    <p class="lead">Bootstrap 是完全开源的。代码的托管、开发和维护都在 GitHub 平台上完成。</p>
    <a href="javascript:;" class="btn btn-outline btn-lg">查看 GitHub 项目主页</a>
  </div>
</div>




<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">基于 Bootstrap 构建的网站</h2>
    <p class="lead">全球数以百万计的网站都是基于 Bootstrap 构建的。你可以先参观一下我们提供的 <a href="javascript:;">实例精选</a> 或者看一看我们粉丝的网站吧。</p>

    
    <hr class="half-rule">

    <p class="lead">我们在“优站精选”里展示了许多精美的 Bootstrap 网站。</p>
    <a href="javascript:;" class="btn btn-outline btn-lg">逛一逛“优站精选”</a>
  </div>
</div>


    <!-- Footer
================================================== -->
<footer class="bs-docs-footer">
  <div class="container">
    <ul class="bs-docs-footer-links">
      <li><a href="javascript:;">GitHub</a></li>
      <li><a href="javascript:;">Twitter</a></li>
      <li><a href="javascript:;">实例</a></li>
      <li><a href="javascript:;">关于</a></li>
    </ul>

    <p>Designed and built with all the love in the world by <a href="javascript:;" rel="noopener" target="_blank">@mdo</a> and <a href="javascript:;" rel="noopener" target="_blank">@fat</a>. Maintained by the <a href="javascript:;">core team</a> with the help of <a href="javascript:;">our contributors</a>.</p>

    <p>Code licensed <a href="javascript:;" rel="license noopener" target="_blank">MIT</a>, docs <a href="javascript:;" rel="license noopener" target="_blank">CC BY 3.0</a>.</p>

  </div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="static/js/jquery.min1.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.31/assets/js/vendor/jquery.min.js"><\/script>')</script>


  <script src="static/js/bootstrap.min1.js"></script>





  <script src="static/js/docs.min1.js"></script>





    

  </body>
</html>
